<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas画板</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="index.js"></script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<!-- 
    1.实现了画板的基本功能：画笔功能、鼠标绘制矩形、圆形、线段；更换线段粗细和颜色；图片的png格式下载；
    画笔颜色历史记录、
-->

<body>
    <div class="big">
        <div class="caidan">
            <!-- <div class="btn" style="background-image: url(img/huabi.p ng);"></div> -->
            <button class="huabi" style="background-image: url(./img/huabi.png);"></button>
            <!-- <button class="react">矩形</button> -->
            <button class="react" style="background-image: url(./img/react.png);"></button>
            <button class="yuan" style="background-image: url(./img/yuan.png);"></button>
            <button class="sanjiao" style="background-image: url(./img/sanjiao.png);"></button>
            <button class="check" style="background-image: url(./img/pen.png);"><input type="checkbox" id="RectangleCheckbox" style="margin-right: 49px;"></button>
            <!-- <button class="check"><input type="checkbox" id="wanggeCheckbox" style="margin-right: 2px;" ></button> -->
            <button class="xian" style="background-image: url(./img/xian.png);"></button>
            <button class="xu" style="background-image: url(./img/xu.png);"></button>
            <button class="jiantou" style="background-image: url(./img/jian.png);"></button>
            <button class="erase" style="background-image: url(./img/color.png);"></button>
            <button class="text" style="background-image: url(./img/up.png);"></button>
            <button class="down" style="background-image: url(./img/down.png);"></button>
            <button class="clear" style="background-image: url(./img/del.png);"></button>
        </div>
        <canvas width="1000" height="480" style="border:grey 1px solid;" id="myCanvas"></canvas> 123
        <div class="colordiv">
            <span class="c1" style="background-color: #a349a4;"></span>
            <span class="c2" style="background-color: #3f48cc;"></span>
            <span class="c3" style="background-color: #00a2e8;"></span>
            <span class="c4" style="background-color: #22b14c;"></span>
            <span class="c5" style="background-color: #fff200;"></span>
            <span class="c6" style="background-color: #ff7f27;"></span>
            <span class="c7" style="background-color: #ed1c24;"></span>
            <span class="c8" style="background-color: #ffaec9;"></span>
            <span class="c9"></span>
            <span class="c10"></span>
            <!-- <span class="c11"><input type="color" id="colors"></span> -->
            <input type="color" id="colors">
        </div>
        <div class="sel">
            <select id="select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>

        <div class="dropdown">
            <div class="dropbtn"></div>
            <div class="dropdown-content">
                <a href="#" style="background-image: url(../img/one.png);"></a>
                <a href="#" style="background-image: url(../img/two.png);"></a>
                <a href="#" style="background-image: url(../img/three.png);"></a>
            </div>
        </div>
        <input type="text" name="" id="wenben" placeholder="请输入您的文本">
        <div class="txtBox">
            字体大小：
            <div class="txtsize">
                <select id="size">
                    <option value="25">小</option>
                    <option value="40">中</option>
                    <option value="60">大</option>
                    <option value="80">超大</option>
                </select>
            </div>
            <br> 字体样式：
            <div class="txtcss">
                <select id="yangshi">
                    <option value="华文行楷">华文行楷</option>
                    <option value="宋体">宋体</option>
                    <option value="微软雅黑">微软雅黑</option>
                    <option value="隶书">隶书</option>
                </select>
            </div>
        </div>
        <h1 id="jishi">00:00</h1>
        <div class="ciyu">
            <h2 id="ci">你画你猜</h2>
            <button id="update">更换</button>
            <button id="ok">确定</button>
        </div>
        <div class="music">
            <img src="img/play.png" alt="" class="yinyue">
        </div>
        <audio src="mp3/music.mp3" controls="controls" id="mymp3" autoplay="autoplay" loop="loop"></audio>
    </div>


</body>

</html>